<template>
    <div class="container">
        <div class="log">
            <div class="left">
                <img src="../../img/2.png" alt />
            </div>
            <div class="right">
                <div class="right1">
                    <p class="wen">访客注册</p>
                    <el-form
                        ref="ruleFormRef"
                        :model="ruleForm"
                        status-icon
                        class="demo-ruleForm"
                        style="margin-left: 36px;"
                    >
                        <el-form-item label="账户:" prop="pass">
                            <el-input
                                v-model="ruleForm.username"
                                type="用户名"
                                autocomplete="off"
                                style="padding-right: 20px;"
                            />
                        </el-form-item>
                        <el-form-item label="密码:" prop="checkPass">
                            <el-input
                                v-model="ruleForm.password"
                                type="密码"
                                autocomplete="off"
                                style="padding-right: 20px;"
                            />
                        </el-form-item>
                        <el-form-item label="确认:" prop="checkPass">
                            <el-input
                                v-model="ruleForm.que"
                                type="确认"
                                autocomplete="off"
                                style="padding-right: 20px;"
                            />
                        </el-form-item>
                    </el-form>
                    <Button @click="submitForm(ruleForm)" class="deng">注册</Button>
                    <Button class="zhu" @click="zhu()">登录</Button>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%">
            <h3>注册成功</h3>
            <span>是否跳转到登录</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="ok()">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
  <script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { getZhu } from '../../api'
const dialogVisible = ref(false)
export default defineComponent({
    setup() {
        const ruleFormRef = ref()
        const ruleForm = reactive({
            username: '',
            password: '',
            que: ''

        })
        const data1 = ref('')
        var d = new Date();  //获取时间
        var hour = d.getHours(); //获取小时
        var minute = d.getMinutes();//获取分 bn
        var second = d.getSeconds();//获取秒
        console.log(d.getFullYear()); //年
        console.log(d.getMonth() + 1);  //月
        console.log(d.getDate())   //日
        console.log(hour, minute, second);  //小时分钟秒
 data1.value = '' + d.getFullYear() + '-' + (d.getMonth() + 1) +'-' + d.getDate() + ' '+' ' + hour + ':' + minute + ':' + second


        const submitForm = (ruleForm: any) => {

            console.log(ruleForm);


            if (ruleForm.username === '' || ruleForm.password === "" || ruleForm.que === '') {
                alert('不能为空')
            } else {
                if (ruleForm.que !== ruleForm.password) {
                    alert('确认密码和密码不一致')
                } else {

                    getZhu({ruleForm,data1}).then((res: any) => {
                        console.log(res);
                        dialogVisible.value = true
                    })
                }
            }

        }
        const zhu = () => {

            window.location.href = "/login"
        }
        const ok = () => {
            window.location.href = "/login"
        }

        return {
            ruleFormRef,
            ruleForm,
            submitForm,
            zhu,
            dialogVisible,
            ok
        }
    }
})
</script>
  
  <style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    background: #ccc;
}
.log {
    width: 80%;
    height: 80%;
    background: #fff;
    position: fixed;
    left: 10%;
    top: 10%;
    display: flex;
}
.right {
    width: 50%;
    height: 100%;
    background: #eee;
}
.right1 {
    margin-top: 50%;
    .wen {
        padding-left: 40px;
        font-size: 24px;
        padding-bottom: 10px;
    }
}
.deng {
    margin-left: 36px;
    width: 540px;
    height: 30px;
    margin-top: 20px;
    background-color: #0188fb;
    border: none;
}
.zhu {
    margin-left: 36px;
    margin-top: 20px;
}
</style>
  